<template>
  <div class="card-container1">
    <!-- user_behavior_distribution -->
    <el-card class="card1" shadow="hover">
      <div id="pie" style="width: 100%; height: 400px"></div>
    </el-card>
    <!-- user_buy_count top 50 -->
    <el-card class="card2 table" shadow="hover">
      <div class="table-container">
        <div id="table1" style="height: 400px">
          <el-table :data="tableData1" style="width: 100%; height: 100%">
            <el-table-column fixed type="index" label="排名" width="118" />
            <el-table-column prop="userId" label="用户ID" width="150" />
            <el-table-column prop="buyCount" label="购买次数" width="150" />
          </el-table>
        </div>
        <div id="table2" style="height: 400px">
          <el-table :data="tableData2" style="width: 100%; height: 100%">
            <el-table-column
              fixed
              type="index"
              label="排名"
              width="118"
              :index="(index) => index + 26"
            />
            <el-table-column prop="userId" label="用户ID" width="150" />
            <el-table-column prop="buyCount" label="购买次数" width="150" />
          </el-table>
        </div>
      </div>
    </el-card>
  </div>
  <!-- user_buy_count -->
  <div class="card-container2">
    <el-card class="card3" shadow="hover">
      <div id="bar" style="width: 100%; height: 400px"></div>
    </el-card>
  </div>
</template>

<script setup lang="js">
import { onMounted, ref } from 'vue';
import * as echarts from 'echarts/core';
import { useRouter } from 'vue-router';
import { getUserBehaviorDistribution, getTop50UserBuyCount, getAllUserBuyCount } from '@/api';

import {
    TitleComponent,
    TooltipComponent,
    LegendComponent,
    ToolboxComponent,
    GridComponent,
    DataZoomComponent
} from 'echarts/components';
import { PieChart, BarChart } from 'echarts/charts';
import { LabelLayout } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';

echarts.use([
    TitleComponent,
    TooltipComponent,
    LegendComponent,
    ToolboxComponent,
    GridComponent,
    DataZoomComponent,
    PieChart,
    BarChart,
    CanvasRenderer,
    LabelLayout
]);

const tableData1 = ref([]);
const tableData2 = ref([]);

onMounted(async () => {
    const router = useRouter();
    var pieChartDom = document.getElementById('pie');
    var pieChart = echarts.init(pieChartDom);
    var pieOption;

    // 获取用户行为分布数据
    const behaviorData = await getUserBehaviorDistribution(router);

    pieOption = {
        title: {
            text: '用户行为分布',
            subtext: '用户行为类型统计',
            left: 'center'
        },
        toolbox: {
            feature: {
                dataView: { readOnly: true },
                restore: {},
                saveAsImage: {}
            }
        },
        tooltip: {
            trigger: 'item',
            formatter: function (params) {
                return `${params.marker}${params.name} : ${params.value} 次 (${params.percent}%)`;
            },
        },
        legend: {
            orient: 'vertical',
            left: 'left'
        },
        series: [
            {
                name: '行为次数',
                type: 'pie',
                radius: '65%',
                startAngle: -20,
                data: behaviorData.map(item => ({
                    value: item.count,
                    name: item.behaviorType
                })),
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };

    pieOption && pieChart.setOption(pieOption);

    var barChartDom = document.getElementById('bar');
    var barChart = echarts.init(barChartDom);
    var barOption;

    // 获取用户购买次数数据
    const buyCountData = await getAllUserBuyCount(router);

    barOption = {
        title: {
            text: '用户购买次数整体分布情况',
            left: 'center',
        },
        toolbox: {
            feature: {
                dataZoom: {
                    yAxisIndex: false
                },
                dataView: { readOnly: true },
                restore: {},
                saveAsImage: {
                    pixelRatio: 2
                },
            }
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            },
            formatter: function (params) {
                let result = '';
                params.forEach(item => {
                    result += item.marker + '用户ID: ' + item.name + '<br/>' + item.marker + '购买次数：' + item.value + ' 次<br/>';
                });
                return result;
            },
        },
        grid: {
            bottom: 90
        },
        dataZoom: [
            {
                type: 'inside',
                start: 0,
                end: 10
            },
            {
                type: 'slider',
                start: 0,
                end: 10
            }
        ],
        xAxis: {
            data: buyCountData.map(item => item.userId),
            silent: false,
            splitLine: {
                show: false,
                showMinLine: true
            },
            splitArea: {
                show: false
            },
            name: '用户ID',
            axisLabel: {
                interval: 'auto'
            }
        },
        yAxis: {
            name: '购买次数',
            splitArea: {
                show: false
            }
        },
        series: [
            {
                type: 'bar',
                data: buyCountData.map(item => item.buyCount),
                large: true
            }
        ]
    };

    barOption && barChart.setOption(barOption);

    // 获取用户购买次数 Top 50 数据
    const top50Data = await getTop50UserBuyCount(router);
    if (top50Data) {
        // 将数据分为两部分
        tableData1.value = top50Data.slice(0, 25);
        tableData2.value = top50Data.slice(25, 50);
    }
});
</script>

<style scoped>
.card-container1 {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.card-container2 {
  display: flex;
  gap: 10px;
}

.card1,
.card2 {
  width: 540px;
}

.card3 {
  width: 100%;
}

.table {
  display: flex;
  flex: 1;
  overflow-x: auto;
  cursor: default;
}

.table-container {
  display: flex;
  width: 100%;
  justify-content: space-between;
}
</style>
